<template>
	<view class="u-flex">
		<scroll-view scroll-y="true" class="leftList scroll-height">
			<view class="u-text-center u-p-20" :class="{active:select==index}" v-for="(item,index) in labelList" :key="index"
			 @click="onLeft(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-height u-flex-1" @scroll="scroll">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<index-list-item :item="item"></index-list-item>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		goodsList
	} from '@/common/data/data.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				select: 0,
				list: [],
				labelList: [{
						name: '好货推荐'
					},
					{
						name: '猪肉'
					},
					{
						name: '羊肉'
					},
					{
						name: '蛋类'
					},
					{
						name: '鸡鸭鹅'
					},
					{
						name: '牛肉'
					},
					{
						name: '瓜果'
					}
				]
			};
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '/pages/search/search'
			})
		},
		onLoad() {
			this.list = goodsList
		},
		methods: {
			onLeft(index) {
				this.select = index
				this.goTop()
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(()=> {
					this.scrollTop = 0
				});
			}
		},
	}
</script>

<style lang="scss">
	.leftList {
		width: 200rpx;
		background-color: #F5F5F5;
	}

	.scroll-height {
		/* #ifdef H5 */
		height: calc(100vh - 95px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
	}

	.list-item {
		border-bottom: 2rpx solid #F5F5F5;
	}

	.active {
		background-color: #FFFFFF;
		position: relative;

		&::after {
			content: '';
			width: 6rpx;
			height: 40rpx;
			background-color: #0eb6ff;
			position: absolute;
			top: 20rpx;
			left: 0;
		}
	}
</style>
